<template>
    <view class="mx20 pt20">
        <view class="h184 theme-bg-color radius16">
            <view class="color-fff pt40 ml40">
                <view class="font-26">我的余额</view>
                <view class="fs48 fw-700 mt6">{{ deposit }}</view>
            </view>
        </view>
        <view class="px30 pt20 bg-fff radius16 mt28 pb20">
            <view class="flex mb30">
                <view class="title_label"></view>
                <view class="fs30 fw-700 ml10">账户提现</view>
            </view>
            <view>
                <view class="bg-f5f px10 radius8">
                    <u-input v-model="params.amount" placeholder="输入提现金额" type="number" />
                </view>
                <view class="mt16 pb32 border-b">
                    <text class="fs24 color-999">当前可提现金额{{ deposit }}元</text>
                    <text class="theme-color ml24" @click="allWithdrawals">全部提现</text>
                </view>
                <view class="py30 flex row-between" @click="showPopup = true">
                    <text class="fs30 color-999"> {{ withdrawalTitle ? withdrawalTitle : '选择提现方式' }}</text>
                    <u-icon name="arrow-right" color="#999"></u-icon>
                </view>
                <!-- 银行卡 -->
                <template v-if="params.method === 'bank'">
                    <!-- 添加银行卡 -->
                    <template v-if="banksList.length === 0">
                        <view class="flex justify-center bg-f5 py22 rounded-8 activeBank">
                            <image class="w-24 h-24" src="/static/icons/add.png" mode="scaleToFill" />
                            <text class="font-26 color-999 pl6">添加银行卡</text>
                        </view>
                    </template>
                    <!-- 银行卡列表 -->
                    <template v-else>
                        <view v-for="item in banksList" :key="item.id"
                            class="bg-f5 rounded-8 py22 px24 mb20 flex justify-between border-f5"
                            :class="{ activeBank: params.bank === item.id }" @click="changeBankId(item.id)">
                            <view class="">
                                <view class="font-26 color-666">{{ item.bank }}</view>
                                <view class="font-26 color-666 mt8">{{ item.account }}</view>
                            </view>
                            <view>
                                <u-icon size="50"
                                    :name="params.id === item.id ? 'checkmark-circle-fill' : 'checkmark-circle'"
                                    :color="params.id === item.id ? $zs : '#999'"></u-icon>
                            </view>
                        </view>
                    </template>
                </template>
                <!-- 微信 -->
                <template v-if="params.method === 'wechat'">
                    <template v-if="wxInfo.id">
                        <view class="bg-f5f radius8 py22 px20 mb20 flex border">
                            <view class="flex">
                                <image class="w40 h40 radius" :src="userInfo.avatar" />
                                <view class="font-30 ml16">{{ wxInfo.name }}</view>
                            </view>
                        </view>
                    </template>
                    <template v-else>
                        <view class="flex row-center bg-f5f py22 radius8">
                            <image class="w24 h24" src="/static/icons/add.png" />
                            <text class="fs26 color-999 pl6"
                                @click="$u.route('pages/mine/wallets/add-bind', { title: '绑定微信', type: 'wechat' })">绑定微信</text>
                        </view>
                    </template>
                </template>
                <!-- 支付宝 -->
                <template v-if="params.method === 'alipay'">
                    <template v-if="zfbInfo.id">
                        <view class="bg-f5f radius8 py22 px20 mb20 flex border">
                            <view class="flex">
                                <image class="w40 h40 radius" :src="userInfo.avatar" />
                                <view class="fs30 ml16">{{ zfbInfo.name }}</view>
                            </view>
                        </view>
                    </template>
                    <template v-else>
                        <view class="flex row-center bg-f5f py22 radius-8">
                            <image class="w24 h24" src="/static/icons/add.png" />
                            <text class="fs26 color-999 pl6"
                                @click="$u.route('pages/mine/wallets/add-bind', { title: '绑定支付宝', type: 'alipay' })">绑定支付宝</text>
                        </view>
                    </template>
                </template>
            </view>
        </view>
        <!-- btn -->
        <view class="mt50">
            <u-button ripple type="primary" @click="submit" :disabled="disabledBtn">确认提现</u-button>
        </view>
        <!-- 提现弹窗 -->
        <withdrawalPopup :isBind="isBind" :showPopup="showPopup" @close="close" @withdrawalType="withdrawalType">
        </withdrawalPopup>

        <u-toast ref="uToast" />
    </view>
</template>
<script>
import withdrawalPopup from '@/components/withdrawalPopup'
export default {
    components: { withdrawalPopup },
    data() {
        return {
            deposit: '',
            showPopup: false,
            withdrawalTitle: '',
            params: {
                amount: '',
                method: ''
            },
            banksList: [],
            userInfo: {},
            wxInfo: {},
            zfbInfo: {},
            isBind: {
                iswx: false,
                iszfb: false
            }
        }
    },
    onShow() {
        this.getUserInfo()
        this.getBindInfo()
        this.getDeposit()
    },
    computed: {
        disabledBtn() {
            return this.params.amount ? false : true
        }
    },
    methods: {
        getUserInfo() {
            this.$u.api.material().then(res => {
                this.userInfo = res.data.data;
            });
        },
        getDeposit() {
            this.$u.api.wallet_info().then(res => {
                this.deposit = res.data.deposit_total
            })
        },
        submit() {
            if (!this.params.amount) {
                this.$refs.uToast.show({ title: '请输入提现金额', type: 'error' })
                return
            }
            this.$u.api.apply_cash(this.params).then(res => {
                this.$u.toast(res.msg)
                this.params.amount = ''
            })
        },
        getBindInfo() {
            this.$u.api.account_detail({ type: 1 }).then(res => {

                this.isBind.iswx = res.data?.data?.id ?? false
                this.wxInfo = res.data.data

            })
            this.$u.api.account_detail({ type: 2 }).then(res => {
                this.isBind.iszfb = res.data?.data?.id ?? false
                this.zfbInfo = res.data.data
            })


        },
        changeBankId(id) {
            this.params.id = id
        },
        allWithdrawals() {
            this.params.amount = this.deposit
        },
        withdrawalType(type) {
            console.log('type: ', type)
            this.withdrawalTitle = type.name
            this.params.method = type.type
            this.showPopup = false
        },
        close(status) {
            this.showPopup = status
        }
    }
}
</script>
<style scoped lang="scss">
.activeBank {
    background: #fff9f8;
    border: 2rpx solid #ffa59b;
}
</style>
<style  lang="scss">
page {
    background-color: #f8f8f8;
}
</style>